<table id="qq">

</table>
<div id="tool" style="padding:2px 5px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'"
       onclick="addComment()">Add</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'"
       onclick="removeComments()" style="margin-right:20px">cut</a>
    keywords: <input id="searchWords" class="easyui-textbox" style="width:110px">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="searchComment()">Search</a>
</div>
<div id="cc" class="easyui-dialog" title='My Dialog' data-options="closed:true,cache: false,modal: true"
     style="width: 600px;height: 400px">
    <form id="ss" method="post" style="width:100%;max-width:90%;padding:50px 20px;">
        <div style="margin-bottom:40px">
            <input class="easyui-textbox" name="commentator" style="width:50%" data-options="label:'评论人:',required:true">
        </div>
        <div>
            <input class="easyui-textbox" name="comment" style="width:90%;height:160px"
                   data-options="label:'评论语:',multiline:true,required:true">
        </div>
        <input type="text" name="_id" style="width: 0;height: 0;opacity:0">
    </form>
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="send()" style="width:80px">Submit</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clear()" style="width:80px">Clear</a>
    </div>
</div>
<script>
    function loadData() {
		$("#qq").datagrid({
			method: "post",
			toolbar: '#tool',
			fit: true,
			pagination: true,
			url: 'http://localhost:3000/comment/list',
			onDblClickRow: function (index, row) {
//			console.log(row);
//			editData(row);
			},
			columns: [[
				{field: 'ck', title: '全选', width: 200, align: 'center', checkbox: true},
				{field: 'comment', title: 'comment', width: 200, align: 'center'},
				{field: 'commentator', title: 'commentator', width: 200, align: 'center'},
				{field: 'date', title: 'date', width: 200, align: 'center'},
				{
					field: 'opt', title: '操作', width: 200, align: 'center',
					formatter: function (value, row, index) {
						return "<a class='a1' href='javascript:void(0)' onclick='commentChange(" + index + ")' style='margin:0 10px'>编辑</a> <a class='a2' href='javascript:void(0)' class='editcls' onclick='commentRemove(" + index + ")'>删除</a>"
					}
				}
			]],
			queryParams: {newsId: newsId},
			onLoadSuccess:function(data){
				$('.a1').linkbutton({toggle:true,group:'g1'});
				$('.a2').linkbutton({toggle:true,group:'g1'});
			}
		});
	}

	loadData();

	function addComment() {
		$('#ss').form('clear');
		$('#cc').dialog('open');

	}

	function removeComments(){
		var data = $('#qq').datagrid('getSelections');
		if(!data.length>0){
			$.messager.show({
				title: 'tip',
				msg: '请选择要删除的用户',
				timeout: 5000,
				showType: 'slide'
			});
		}else{
			var ids = [];
			for (var i in data) {
				ids.push(data[i]._id)
			}
			$.messager.confirm('Confirm', 'Are you sure you want to delete nodes?', function (r) {
				if (r) {
					$.ajax({
						url: 'http://localhost:3000/comment/remove',
						data: {ids: ids.toString()},
						method: 'post',
						success: function (res) {
							console.log(222);
							$.messager.show({
								title: 'tip',
								msg: '用户删除成功',
								timeout: 5000,
								showType: 'slide'
							});
							$('#qq').datagrid('reload');
						}
					})
				}
			})
		}
    }

	function searchComment() {
		var keytext = $("#searchWords").val();
		console.log(keytext);
		$.ajax({
			url:"http://localhost:3000/comment/list",
			method:"post",
			data:{keywords:keytext,newsId:newsId}
		}).done(res=>{
			$("#qq").datagrid('loadData',res);
		})
	}
    
	function commentRemove(index) {
		var row = $('#qq').datagrid('getData').rows[index];
		$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
			if (r){
				var id = row._id;
				$.ajax({
					url:"http://localhost:3000/comment/data/"+id,
					method:"delete",
				}).done(res=>{
					$('#qq').datagrid('reload');
					slide();
				})
			}
		});
	}
	
	function commentChange(index) {
		var row = $('#qq').datagrid('getData').rows[index];
		console.log(row);
		$('#ss').form('load', row);
		$('#cc').dialog('open');
	}
	
	function send() {
		$('#ss').form('submit', {
			onSubmit: function () {
				var isValid = $(this).form('validate');
				if (isValid) {
					var data = $('#ss').serializeObject();
					if (!(data._id && data._id.trim().length > 0)) {
						//add model
						delete data._id;
						data.newsId = newsId;
						$.ajax({
							url: "http://localhost:3000/comment/data",
							method: 'post',
							data: data,
							success: function (res) {
								$('#ss').form('clear');
								$('#cc').dialog('close');
								progress();
							}
						})
					} else {
						//edit model
						$.ajax({
							url: "http://localhost:3000/comment/data/" + data._id,
							method: 'post',
							data: data,
							success: function (res) {
								$('#ss').form('clear');
								$('#cc').dialog('close');
								progress();
							}
						})
					}
				}
			}
		});
	}
	function clearForm() {
		$('#ss').form('clear');
	}
</script>